<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博舆情分析系统-登录</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <style>
        body {
            background: linear-gradient(to right, pink, skyblue);
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            margin-top: 150px;
        }
        .login {
            width: 800px;
            max-width: 600px; /* 添加最大宽度以防止在大屏幕上变得过大 */
            height: 500px;
            background-color: #ffffff;
            padding: 50px;
            box-sizing: border-box;
            border-radius: 20px;
        }
        .appname {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
        }
        .title {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
        }
        .user {
            border: 1px solid #b0b3c9;
            width: 100%;
            max-width: 300px; /* 限制输入框的最大宽度 */
            height: 30px;
            border-radius: 5px;
            text-align: center;
            margin-top: 50px;
            
        }
        .password {
            border: 1px solid #b0b3c9;
            width: 100%;
            max-width: 300px; /* 限制输入框的最大宽度 */
            height: 30px;
            border-radius: 5px;
            text-align: center;
            margin-top: 30px;
        }
        .username {
            text-align: center;
            box-shadow: rgba(149,157,165,0.2)0px,8px,20px;
        }
        .loginbutton {
            margin-top: 30px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
            background: linear-gradient(to right, pink, skyblue);
            color: #ffffff;
            border-style: none;
            display: block; /* 确保按钮在容器中独占一行 */
            margin: 30px auto 0; /* 水平居中 */
        }
        .go-to-singup {
            cursor: pointer;
            color: #4e7aff;
            border-style: none;
            background: #ffffff;
            display: inline-block;
            margin: 10px auto 0; /* 水平居中 */
            text-align: center;
            
        }
        .container {
            text-align: center; /* 确保容器内的内容水平居中 */
        }
        .password-visibility {
            cursor: pointer;
            color: #4e7aff;
            border-style: none;
            background: #ffffff;
            
            
        }
        .container {
            text-align: center; /* 确保容器内的内容水平居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="login">
            <div class="appname">微博舆情分析系统</div>
            <div class="title">welcome login</div>
            <div class="username">
                <input class="user" type="text" id="username" placeholder="username"><br>
                <input class="password" type="password" id="password" placeholder="password">
            </div>
            <button @click="login()" class="loginbutton">login</button><br>
            <div>
                 <button @click="jumpsingup()" class="go-to-singup">还没有账号？去注册</button>
                 <button @click="togglePasswordVisibility()" class="password-visibility">显示/隐藏密码</button>
            </div>
           
        </div>
    </div>
</div>

    <script>
        const app = Vue.createApp({
      data() {
        return {
          username: '',
          password: ''
        };
      },

      methods :{
      // 发送请求到后端进行验证
       login() {
  const usernamevalue = document.getElementById('username').value;
  const passwordvalue = document.getElementById('password').value;

  // 使用 axios 发送请求到后端进行验证
  axios.post('http://10.21.249.41:8000/users/login/', { 
    username : usernamevalue, 
    password : passwordvalue
  
  }, {
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    }
  })
 .then(response => {
    console.log(response.data.message);
    if (response.data.message==='Login successful') {
      window.location.href = 'home.html';
    } else if (response.data.message === '用户不存在') {
      document.getElementById('message').innerHTML = '用户不存在，请检查输入或注册。';
    } else if (response.data.message === '账号或密码错误') {
      document.getElementById('message').innerHTML = '账号或密码错误，请重新输入。';
    }
  })
 .catch(error => {
    console.error('Error:', error);
    alert('登录时发生错误，请稍后重试。');
  })
},

          togglePasswordVisibility() {
        var passwordInput = document.getElementById("password");
        if (passwordInput.type === "password") {
           passwordInput.type = "text";
        } else {
           passwordInput.type = "password";
        }

       },

         jumpsingup() {
      // 跳转到注册页面的逻辑
      window.location.href ='signup.html';
        }
      }
    });
    app.mount('#app');
    </script>
</body>
</html>